#@adminLayout()
#define main()
<div class="jbolt_page" data-key="/demo/imguploader" >
<div class="jbolt_page_title">
	<h1>图片上传演示</h1>
</div>
<div class="jbolt_page_content">

<div class="row">

<div class="col-12">
<div class="card">
<div class="card-header">单图上传</div>
<div class="card-body">
<div class="alert alert-primary">
注意：上传组件需要放在form表单外面，不随表单提交图片数据，上传组件选择图片后可预览，并且自动ajax上传图片后返回地址，
然后需要设置到一个隐藏域里就可以了。具体请看imguploader.html
</div>
<!-- 示例代码 -->
<form onsubmit="return FormChecker.check(this);"  id="imguploaderForm" action="demo/imguploader/submit" method="post">
	<input type="text" data-rule="required" readonly="readonly" data-tips="请在下方选择图片上传" name="imgUploadDemo" id="imgUploadDemo" value="#(imgUploadDemo??)" class="form-control"/>
	<small class="text-danger">这里需要实际项目中做成隐藏域</small>
	<br/>
	<button  type="submit" class="btn btn-primary"><i class="fa fa-check mr-1">提交表单</i></button>
</form>
<fieldset class="form-page-fieldset">
<legend>上传图片-单图</legend>
#if(msg)
<div class="alert alert-danger">
#(msg??)
</div>
#end
<div class="form-group text-center">
	<div class="j_img_uploder" data-url="/demo/imguploader/uploadImage" data-value="#realImage(imgUploadDemo??)"  data-handler="uploadFile"  data-hiddeninput="imgUploadDemo"  data-area="400,400" data-maxsize="2000"></div>
</div>
</fieldset>
	
</div>
</div>
</div>
 
</div>
</div>
</div>
#end

#define js()
<script>

$(function(){
})
</script>
#end
